<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const isLogin = ref(true);
// 定义导航条列表
const navList = [
    {
        path:'/home',
        name:'home',
        text:'首页'
    },
    {
        path:'/bookhotel',
        name:'bookhotel',
        text:'预约'
    },
    {
        path:'/mapside',
        name:'mapside',
        text:'周边'
    },
    {
        path:'/myorder',
        name:'myorder',
        text:'我的订单'
    },
    
    {
        path:'/about',
        name:'about',
        text:'关于'
    }
];

function changeNav(nav) {
  router.push({ name: nav.name });
}
function login(){
    isLogin.value=true
}
function option(command){
    if(command='quit'){
        isLogin.value=false
    }else{
        return
    }
}
</script>

<template>
  <div class="header">
    <div class="logo">
      <img src="../../assets/logo2.png" alt="" />
    </div>
    <div class="menu">
      <ul class="nav-list">
        <li
          v-for="(nav, index) in navList"
          :key="index"
          @click="changeNav(nav)"
          :class="{ active: nav.path == route.path }"
        >
          {{ nav.text }}
        </li>
      </ul>
    </div>
    <div class="own">
      <div class="userInfo" v-if="isLogin">
        <img src="../../assets/touxiang.png" alt="">
        <el-dropdown trigger="click" @command="option">
          <span class="el-dropdown-link">
            少侠好走位
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="center">个人中心</el-dropdown-item>
              <el-dropdown-item command="quit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <p v-else><span @click="login">登录</span> | <span>注册</span></p>
    </div>
  </div>
</template>

<style scoped>
/* .example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
} */
.el-dropdown{
    margin-top: 25px;
}
.header {
  width: 100%;
  height: 100px;
  background-color: rgb(251, 247, 241);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header .logo {
  width: 6%;
  height: 70%;
  /* border: 1px solid red; */
}
.header .logo > img {
  width: 100%;
  height: 100%;
}
.header .menu {
  width: 50%;
  height: 80%;
  /* border: 1px solid red; */
}
.header .menu .nav-list {
  width: 100%;
  height: 70%;
  list-style: none;
  display: flex;
  align-items: flex-end;
}
.header .menu .nav-list > li {
  width: 80px;
  text-align: center;
}
.header .menu .nav-list > li:hover {
  cursor: pointer;
  color: orange;
}

.header .menu .nav-list > li.active {
  text-decoration: underline;
  color: orange;
}
.header .own {
  width: 15%;
  height: 80%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.header .own >.userInfo{
    display: flex;
    align-items: center;
    align-items: flex-end;
} 
.header .own >.userInfo img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}
.header .own > p {
  /* align-self: flex-end; */
  margin-top: 20px;
}
</style>
